<template>
    <div>
        <table>
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>{{ queryinfo.HouseTypeName }}</td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td><img :src="queryinfo.Photo" width="100" height="100" alt=""/></td>
                </tr>
                <tr>
                    <td>房型面积</td>
                    <td>{{ queryinfo.Area }}</td>
                </tr>
                <tr>
                    <td>是否有窗</td>
                    <td>{{ queryinfo.IsWindow?"有窗":"无窗" }}</td>
                </tr>
                <tr>
                    <td>入住人数</td>
                    <td>{{ queryinfo.Area }}</td>
                </tr>
                <tr>
                    <td>房型面积</td>
                    <td>{{ queryinfo.Area }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted}from 'vue';
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute}from 'vue-router'
const router=useRouter();
const route=useRoute();

let queryinfo:any=reactive({
  "HouseTypeName": "",
  "Photo": "",
  "Area": '',
  "IsWindow": '',
  "Price": '',
  "State": '',
})

onMounted(()=>{
    getdata();
})

//获取详情数据
const getdata=()=>{
    axios({
        url:'/api/House/GetHouseTypeItem',
        method:'get',
        params:{id:route.query.id}
    })
    .then(res=>{
        console.log(res);
        Object.assign(queryinfo,res.data);
    })
}
</script>

<style scoped>

</style>